<template>
	<view>
		<u-navbar :border-bottom="false" :is-back="true" :title="navTitle" :custom-back="customBack"></u-navbar>
		<u-search bg-color='#FFFFFF' v-model="query.name" placeholder="请输入表单名称进行搜索" margin="35rpx" @custom="search"
			@search="search">
		</u-search>
		<scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore">
			<u-card v-for="(form,index) of list" @click="handleOpenDir(form)" :key="form.id">
				<view class="u-flex u-row-between" slot="head">
					<view class="u-card__head--left u-flex u-line-1">
						<image src="../../static/tduck/form/dir.png" class="u-m-r-20 icon" v-if="form.folder"></image>
						<text class="u-card__head--left__title u-line-1">{{ form.name }}</text>
					</view>
					<view class="u-card__head--right u-line-1">

					</view>
				</view>
				<view class="" slot="body">
					<view>
						<u-badge :is-dot="true" type="primary" v-if="form.status==1"></u-badge>
						<u-badge :is-dot="true" type="success" v-if="form.status==2"></u-badge>
						<u-badge :is-dot="true" type="error" v-if="form.status==3"></u-badge>
						<u-tag :text="form.statusDesc" type="success" />
					</view>
					<view class="u-m-t-20">
						<text class=" ">
							创建时间：{{ form.createTime }}
						</text>
					</view>
				</view>
				<view slot="foot">
					<u-row gutter="16" v-if="!form.folder">
						<u-col span="4">
							<u-icon name="share" size="34" color="#2b85e4" label="分享"
								@click="$u.route('/pages/form/share?formKey='+form.formKey)"></u-icon>
						</u-col>
						<u-col span="4">
							<u-icon name="list" size="34" color="#2b85e4" label="数据"
								@click="handleOpenDetail(form,index)"></u-icon>
						</u-col>
						<u-col span="4">
							<u-icon name="more-dot-fill" size="34" color="#2b85e4" label="更多"
								@click="handleOpenAction(form,index)"></u-icon>
						</u-col>
					</u-row>
					<u-row gutter="16" v-else>
						<u-col span="4">
							<view @click.stop="handleRenameFolderDialog(form)">
								<u-icon name="edit-pen" size="34" color="#2b85e4" label="重命名"></u-icon>
							</view>
						</u-col>
						<u-col span="4">
							<view @click.stop="deleteForm(form.formKey,index)">
								<u-icon name="trash" size="34" color="#dd6161" label="删除">
								</u-icon>
							</view>
						</u-col>
					</u-row>
				</view>
			</u-card>
			<view class="loadmore" @click="loadMore">
				<u-loadmore :status="loadStatus"></u-loadmore>
			</view>
		</scroll-view>
		<u-action-sheet :list="actionList" v-model="show" @click="handleActionClick"></u-action-sheet>
		<u-empty text="暂无表单" mode="list" v-if="!list.length"></u-empty>
		<u-modal v-model="showRenameModel" title="重命名文件夹名称" @confirm="handleRenameFolder()">
			<view class="slot-content u-p-20">
				<u-input v-model="folderData.name" border />
			</view>
		</u-modal>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				navTitle: '表单列表',
				formData: {
					description: '',
					name: '问卷名称',
					type: "1"
				},
				folderData: {
					name: '文件夹名称',
					type: 3,
					folder: true,
					formKey: ''
				},
				showRenameModel: false,
				actionList: [{
						text: '发布',
					}, {
						text: '预览'
					}, {
						text: '暂停'
					},
					{
						text: '删除'
					}
				],
				show: false,
				query: {
					current: 1,
					size: 20,
					name: '',
					folderId: 0
				},
				loadStatus: 'loadmore',
				list: [],
				total: 0,
			};
		},
		onLoad() {
			this.loadList()
		},
		methods: {
			customBack() {
				if (this.query.folderId != 0) {
					this.query.folderId = 0
					this.navTitle = '表单列表'
					this.search()
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			handleOpenAction(form, index) {
				this.show = true
				this.formData = form
				this.formData.index = index
			},
			handleOpenDetail(form, index) {
				debugger
				let params = JSON.stringify({
					key: form.formKey,
					title: form.name,
					token: this.vuex_token
				})
				let url = `${this.$u.api.getWebBaseUrl()}/m/project/form/data`
				uni.navigateTo({
					url: `/pages/common/webview?url=${url}&params=${params}`
				})
			},
			handleActionClick(index) {
				if (index == 0) {
					this.$u.api.form.publishForm(this.formData).then(res => {
						this.$u.toast('发布成功')
						this.list[this.formData.index]['statusDesc'] = '收集中'
						this.list[this.formData.index]['status'] = 2
					})
				} else if (index == 1) {
					let params = JSON.stringify({
						key: this.formData.formKey,
						title: this.formData.name
					})
					uni.navigateTo({
						url: `/pages/common/webview?url=${this.$u.api.getWebBaseUrl()}/project/form/view&params=${params}`
					})
				} else if (index == 2) {
					this.$u.api.form.stopForm(this.formData).then(res => {
						this.$u.toast('停止发布')
						this.list[this.formData.index]['statusDesc'] = '停止收集'
						this.list[this.formData.index]['status'] = 1
					})
				} else if (index == 3) {
					this.$u.api.form.logicDeleteForm(this.formData).then(res => {
						this.$u.toast('删除成功')
						that.list.splice(this.formData.index, 1)
					})
				}
			},
			handleOpenDir(form) {
				if (form.folder) {
					this.query.folderId = form.id
					this.navTitle = form.name
					this.search()
				}
			},
			handleRenameFolderDialog(item) {
				this.showRenameModel = true
				this.folderData = item
			},
			/**
			 * 重新命名文件夹
			 */
			handleRenameFolder() {
				this.$u.api.form.updateForm(this.folderData).then(res => {
					this.$u.toast('修改成功')
					this.showRenameModel = null
				})
			},
			deleteForm(key, index) {
				let that = this
				uni.showModal({
					title: '确认删除该文件夹?',
					success: function(res) {
						if (res.confirm) {
							that.$u.api.form.deleteForm({
								'formKey': key
							}).then(res => {
								if (res) {
									that.$u.toast('刪除成功')
									that.list.splice(index, 1)
								}
							})
						}
					}
				});
			},
			loadMore() {
				this.loadStatus = "loading";
				setTimeout(() => {
					this.query.current += 1;
					this.loadList();
				}, 100);
			},
			loadList() {
				this.$u.api.getFormCooperationPage(this.query).then(res => {
					if (!res.records || res.records.length == 0) {
						this.loadStatus = "nomore";
						return;
					}
					this.list = this.list.concat(res.records);
					this.total = res.total;
					this.query.current = res.current;
					this.query.size = res.size;
					this.loadStatus = "loadmore";
				});
			},
			search(value) {
				this.list = [];
				this.query.current = 0;
				this.loadList();
			},
		}
	};
</script>
<style lang="scss">
	page {
		background-color: $u-bg-color;
	}
</style>
<style lang="scss" scoped>
	page {
		height: 100%;
		background-color: $u-bg-color;
	}

	.title {
		font-size: 28rpx;
		font-weight: bold;
		color: $u-main-color;
		line-height: 50rpx;
		margin-left: 20rpx;
	}

	.icon {
		width: 40rpx;
		height: 40rpx;
		display: inline-block;
		vertical-align: middle;
	}
</style>
